<template>
    <div class="tab-bar-item" @click="ItemClick">
        <slot name="item-icon" v-if="!isActive"></slot>
        <slot name="item-icon-active" v-else></slot>
        <div :style="activeStyle">
            <slot name="item-text"></slot>
            <!-- 动态绑定类：active，当isactive为真时类生效 slot无法动态绑定类，所以外层加个div -->
        </div>
    </div>
</template>

<script>
    export  default {
        name:'TabBarItem',
        props:{
            path:String,
            activeColor:{
                type:String,
                default:'red'
            }
        },
        computed:{
            activeStyle(){
                return this.isActive ? {color:this.activeColor}:{}
            }
        },
        data(){
            return{
                isActive:false
            }
        },
        methods:{
            ItemClick(){
                console.log('您点击了它')
                // 底部导航栏变色
                this.isActive = !this.isActive
                // router跳转
                this.$router.replace(this.path)    
            }
        }
    }
</script>

<style>
    .tab-bar-item{
        flex: 1;
        text-align: center;
        height: 49px;
        font-size: 10px;
        margin-top: 5px;
    }
    .tab-bar-item img{
        width: 24px;
        height: 24px;
        vertical-align: middle;
    }
    .tab-bar-item span{
        
        display: block;
    }
</style>
